import React, { useMemo, useState } from 'react';
import { Menu, Badge } from 'antd';
import { CalendarOutlined } from '@ant-design/icons';
import dayjs from 'dayjs';

function DateArchive({ theme, onDateSelect, selectedDate, todos }) {
  const dateGroups = useMemo(() => {
    // 按日期分组
    const groups = todos.reduce((acc, todo) => {
      const date = dayjs(todo.deadTime).format('YYYY-MM-DD');
      if (!acc[date]) {
        acc[date] = {
          total: 0,
          completed: 0
        };
      }
      acc[date].total += 1;
      if (todo.isCompleted) {
        acc[date].completed += 1;
      }
      return acc;
    }, {});

    // 转换为菜单项
    return Object.entries(groups)
      .sort(([dateA], [dateB]) => dayjs(dateB).diff(dayjs(dateA)))
      .map(([date, stats]) => ({
        key: date,
        label: (
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <span>{dayjs(date).format('MM月DD日')}</span>
            <Badge 
              count={`${stats.completed}/${stats.total}`}
              style={{ 
                backgroundColor: theme.colorPrimary,
                marginLeft: 8
              }} 
            />
          </div>
        ),
        icon: <CalendarOutlined />,
      }));
  }, [todos, theme]);

  return (
    <>
      <Menu
        mode="inline"
        selectedKeys={selectedDate ? [selectedDate] : []}
        style={{
          background: 'transparent',
          border: 'none',
        }}
        items={[
          {
            key: 'all',
            label: '全部待办',
            icon: <CalendarOutlined />,
          },
          {
            type: 'divider',
          },
          ...dateGroups,
        ]}
        onClick={({ key }) => onDateSelect(key === 'all' ? null : key)}
      />
    </>
  );
}

export default DateArchive; 